<template>
  <el-card class="line-chart-card">
    <div ref="chartRef" class="chart-container"></div>
  </el-card>
</template>
<script setup lang="ts">
import { onMounted, ref,type PropType } from 'vue';
import * as ECharts from 'echarts';
import { ElCard } from 'element-plus';

interface LineChartData {
  xAxis: string[]; // 时间轴标签
  yAxis: number[]; // 对应数值
}

interface ChartData {
  title: string;
  series: LineChartData;
}

const props = defineProps({
  data: {
    type: Object as PropType<ChartData>,
    required: true
  }
});

const chartRef = ref<HTMLDivElement | null>(null);

onMounted(() => {
  if (chartRef.value) {
    const myChart = ECharts.init(chartRef.value);

    const option = {
      title: { text: props.data.title },
      tooltip: {},
      legend: { data: ['月度增长'] },
      xAxis: { data: props.data.series.xAxis },
      yAxis: {},
      series: [
        {
          name: '月度增长',
          type: 'line',
          areaStyle: {},
          data: props.data.series.yAxis
        }
      ]
    };

    myChart.setOption(option);
  }
});
</script>
<style scoped>
.line-chart-card {
  padding: 0;
  height: 80%;
  width: 40%;
}

.chart-container {
  width: 500px;
  height: 400px;
}
</style>
